<link rel="stylesheet" href="/assets/css/details.css">
<link rel="stylesheet" href="/assets/plugin/ckplayer/css/ckplayer.css">
<div id="cover">
    <!-- 课程封面 -->
    <img class="cover_bg" src="{$subject.thumbs_cdn}">
    <!-- 中间播放键 -->
    <div id="play">
        <img src="/assets/images/play.png"/>
    </div>
</div>

<!-- ckplayer视频容器元素 -->
<div id="video"></div>

<!-- 课程信息 -->
<div class="head">
    <div class="info">
        <h4 class="name">{$subject.title}</h4>
        <div class="action">
            <!-- 点赞 -->
            <!-- <img class="thumbs" src="./assets/images/thumbs-up.png" alt=""> -->
            <!-- 未点赞 -->
            <img class="thumbs"
                 src="{$subject['like_status'] ? '/assets/images/thumbs-up.png' : '/assets/images/thumbs.png'}"
                 alt="">
            <span class="num">{$subject.like_count}</span>
        </div>
    </div>
</div>

<div class="title">课程章节</div>
<table class="list">
    <tr>
        <td>课程名称</td>
        <td>{$subject.title}</td>
    </tr>
    <tr class="price">
        <td>课程价格</td>
        <td>￥{$subject.price}元</td>
    </tr>
    <tr>
        <td>发布时间</td>
        <td>{$subject.createtime_text}</td>
    </tr>
    <tr>
        <td>章节总数</td>
        <td>{$subject.chapter_count}小节</td>
    </tr>
</table>

<div class="title">课程介绍</div>
<div class="mui-table-view content">{$subject.content}</div>

<div class="title">课程章节</div>
<ul class="mui-table-view">
    {if condition="count($chapterList) > 0"}
    {foreach $chapterList as $key => $item}
    <li class="mui-table-view-cell" onclick="toggle(`{$item.id}`)">{$key + 1}、{$item.title}</li>
    {/foreach}
    {else /}
    <li class="mui-table-view-cell">暂无课程章节</li>
    {/if}
</ul>

<div class="title">用户评论</div>

<!-- 评论内容 -->
<ul class="mui-table-view">
    {if condition="count($commentList) > 0"}
    {foreach($commentList as $item)}
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:">
            <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_cdn}">
            <div class="mui-media-body">
                {$item.business.nickname}
                <p class='mui-ellipsis'>{$item.content}</p>
            </div>
        </a>
    </li>
    {/foreach}
    {else /}
    <li class="mui-table-view-cell mui-media">
        暂无评价
    </li>
    {/if}
</ul>


<div class="more">
    {if condition="count($commentList) > 0"}
    <a href="{:url('/home/subject/comment/index',['subid' => $subject.id])}"
       class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
    {else /}
    <a href="javascript:" class="mui-btn mui-btn-primary mui-btn-outlined">暂无更多评论</a>
    {/if}
</div>

<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

<!-- 加载ckplayer视频插件 -->

<script src="/assets/plugin/ckplayer/js/ckplayer.min.js"></script>

<script>
    let player;
    $('.action').click(function () {
        $.ajax({
            type: 'post',
            url: `{:url('/home/subject/subject/like')}`,
            data: {
                subid: `{$subject.id}`
            },
            dataType: 'json',
            success: function (res) {
                if (res.code === 1) {
                    if (res.msg.includes('取消点赞成功')) {
                        $('.num').text(parseInt($('.num').text()) - 1);
                        $('.thumbs').attr('src', '/assets/images/thumbs.png');
                    } else {
                        $('.num').text(parseInt($('.num').text()) + 1);
                        $('.thumbs').attr('src', '/assets/images/thumbs-up.png');
                    }
                }
                mui.toast(res.msg);
            }
        })
    });

    let subId = `{$subject.id}`, cid;

    function toggle(id) {
        cid = id
        if (player) {
            player.pause()
            player.remove()
        }

        $('#cover').css('display','block')
        $('#video').css('display','none')
    }

    // 购买
    $('#buy').click(function () {
        mui('#sheet1').popover('toggle');

        const btnArray = ['取消', '确定'];
        mui.confirm('确认购买该课程？', '购买提示', btnArray, function (e) {
            if (e.index === 1) {
                $.ajax({
                    type: 'post',
                    url: `{:url('/home/subject/subject/buy')}`,
                    data: {
                        subid: subId
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 1) {
                            mui.toast(res.msg);
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            mui.toast(res.msg);
                        }
                    }
                })
            }
        })
    });

    // 播放
    $('#play').click(function () {
        $.ajax({
            type: 'post',
            url: `{:url('/home/subject/subject/play')}`,
            data: {
                subid: subId,
                cid
            },
            dataType: 'json',
            success: function (res) {
                if (res.code === 0) {
                    if (res.data.buy) {
                        mui('#sheet1').popover('toggle');
                    }
                    mui.toast(res.msg);
                } else {
                    let url = res.data.url ? res.data.url :'';
                    if (url) {
                        $('#cover').css('display','none')
                        $('#video').css('display','block')
                        player = new ckplayer({
                            container: '#video',// 视频容器的ID
                            volume: 1,// 默认音量，范围0-1
                            video: url,// 视频地址
                            playbackrate: 1,// 默认倍速
                            autoplay: true,// 是否自动播放
                            loop: false,// 是否需要循环播放
                            information:{
                                // 关于
                                'Load:':'{loadTime} second',
                                'Duration:':'{duration} second',
                                'Size:':'{videoWidth}x{videoHeight}',
                                'Volume:':'{volume}%',
                                'Sudio decoded:':'{audioDecodedByteCount} Byte',
                                'Video decoded:':'{videoDecodedByteCount} Byte'
                            },
                        });
                    } else {
                        mui.toast('暂无视频');
                    }
                }
            }
        })
    });

</script>